<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh">

<!--侧边栏-->
<aside class="bsb-sidebar-1 offcanvas offcanvas-start" tabindex="-1" id="bsbSidebar1" aria-labelledby="bsbSidebarLabel1" th:fragment="sidebar">
    <div class="offcanvas-header">
        <a class="sidebar-brand" th:href="@{main.html}">
            <img th:src="@{/assets/img/branding/console-logo.svg}" id="bsbSidebarLabel1" class="bsb-tpl-logo" alt="Logo">
        </a>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body pt-0">
        <hr class="sidebar-divider mb-3">
        <ul class="navbar-nav" th:each="item : ${menuList}">

            <li class="nav-item mt-3" th:if="${not #lists.isEmpty(item.childList)}">
                <h6 class="py-1 text-secondary text-uppercase fs-7" th:text="${item.name}"></h6>
            </li>

            <!--Dashboard-->
            <ul class="navbar-nav" th:if="${not #lists.isEmpty(item.childList)}" th:each="childItem : ${item.childList}">

                <li class="nav-item">
                    <a th:class="${menuActive == childItem.menuMarks}?'nav-link p-3 bg-light rounded active':'nav-link p-3'"
                       data-bs-toggle="collapse" th:href="${'#' + childItem.menuMarks}"
                       role="button"
                       th:aria-expanded="${menuActive == childItem.menuMarks}"
                       th:aria-controls="${childItem.menuMarks}">
                        <div class="nav-link-icon text-primary">
                            <i th:class="${childItem.menuIcon}"></i>
                        </div>
                        <span class="nav-link-text fw-bold" th:text="${childItem.name}"></span>
                    </a>
                    <div th:class="${menuActive == childItem.menuMarks}?'collapse show':'collapse'" th:id="${childItem.menuMarks}" th:if="${not #lists.isEmpty(childItem.childList)}">
                        <ul class="nav flex-column ms-4" th:each="grandsonItem : ${childItem.childList}">
                            <li class="nav-item">
                                <a th:class="${fragment == grandsonItem.menuMarks}?'nav-link link-primary active':'nav-link link-secondary'"
                                   aria-current="page"
                                   th:href="@{menu(menu=${childItem.menuMarks},fragment=${grandsonItem.menuMarks})}">
                                    <div class="nav-link-icon text-primary-emphasis">
                                        <i class="bi bi-arrow-right-short"></i>
                                    </div>
                                    <span class="nav-link-text" th:text="${grandsonItem.name}"></span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </li>
            </ul>
        </ul>

        <hr class="sidebar-divider my-4">
        <div class="bg-light rounded-3 position-relative px-4 pt-5 pb-4 mt-7">
            <div class="bsb-w-80 bsb-h-80 d-flex align-items-center justify-content-center text-bg-primary border border-5 border-white rounded-circle position-absolute top-0 start-50 translate-middle">
                <i class="bi bi-rocket-takeoff lh-1 fs-3"></i>
            </div>
            <div class="text-center">
                <h3 class="h5">首页模板</h3>
                <p class="fs-7">浏览首页模板，解锁各种可能性，享受独家这些功能将使您的项目更上一层楼。</p>
                <div class="d-grid m-0">
                    <a class="btn btn-primary rounded-pill" href="#" target="_blank" role="button" th:text="#{browse}"></a>
                </div>
            </div>
        </div>
    </div>
</aside>

</html>